<!--
 * @Description:个体禽舍更换
-->
<template>
  <BaseMainSlot>
    <template v-slot:zhactbar></template>
    <template v-slot:searchbox>
      <div class="label-input mr-20">
        <div class="label">个体名称:</div>
        <div class="input">
          <el-select
            v-model="condition.name"
            clearable
            filterable
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in bionIdList"
              :key="index + 'bionId'"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </div>
      </div>
      <div class="label-input mr-20">
        <div class="label">耳标:</div>
        <div class="input">
          <el-input v-model="condition.eagTag" clearable />
        </div>
      </div>
      <div class="label-input mr-20">
        <div class="label">迁移时间段:</div>
        <div class="input">
          <el-date-picker
            v-model="condition.cultivationStartDate"
            align="right"
            type="date"
            placeholder="请选择开始时间"
          />
        </div>
      </div>
      <div class="label-input mr-20">
        <div class="input">
          <el-date-picker
            v-model="condition.cultivationEndDate"
            align="right"
            type="date"
            placeholder="请选择结束时间"
          />
        </div>
      </div>
      <div class="search ml-20" @click="queryInfo">
        <img src="~@/assets/action-bar-icon/search.png" />
      </div>
    </template>
    <template v-slot:content>
      <el-table
        ref="tableDataRef"
        :data="tableData"
        style="width: 100%"
        max-height="88%"
        border
        stripe
        @current-change="updateInfo"
        @selection-change="handleSelect"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="序号" width="100px" />
        <el-table-column prop="name" label="个体名称" />
        <el-table-column prop="eagTag" label="耳标" />
        <!-- <el-table-column prop="currentFacilityName" label="个体原先养殖设施" /> -->
        <el-table-column label="迁移前设施">
          <template slot-scope="scope">
            <span
              v-if="
                scope.row.currentFacilityGroupName != null &&
                  scope.row.currentFacilityName != null
              "
              style="margin-left: 10px"
            >{{
              scope.row.currentFacilityName +
                "-" +
                scope.row.currentFacilityGroupName
            }}
            </span>
            <span
              v-else-if="scope.row.currentFacilityGroupName != null"
              style="margin-left: 10px"
            >{{ scope.row.currentFacilityGroupName }}
            </span>
            <span
              v-else-if="scope.row.currentFacilityName != null"
              style="margin-left: 10px"
            >{{ scope.row.currentFacilityName }}
            </span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="targetFacilityName" label="迁移后设施" /> -->
        <el-table-column label="迁移后设施">
          <template slot-scope="scope">
            <span
              v-if="
                scope.row.targetFacilityGroupName != null &&
                  scope.row.targetFacilityName != null
              "
              style="margin-left: 10px"
            >{{
              scope.row.targetFacilityName +
                "-" +
                scope.row.targetFacilityGroupName
            }}
            </span>
            <span
              v-else-if="scope.row.targetFacilityGroupName != null"
              style="margin-left: 10px"
            >{{ scope.row.targetFacilityGroupName }}
            </span>
            <span
              v-else-if="scope.row.targetFacilityName != null"
              style="margin-left: 10px"
            >{{ scope.row.targetFacilityName }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="migrationDate" label="迁移日期">
          <template slot-scope="scope">
            <span>{{ formatDateTime_(scope.row.migrationDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="migrationRecordId" label="迁移记录">
          <template slot-scope="scope">
            <span
              class="color"
              @click="checkDetail(scope.row.bionId)"
            >查看详细信息</span>
            <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
              <el-row>
                <el-col :span="6"><h3>迁移前羊舍</h3></el-col>
                <el-col :span="12"><h3>迁移时间</h3></el-col>
                <el-col :span="6"><h3>迁移后羊舍</h3></el-col>
              </el-row>
              <el-row
                v-for="(item, index) in showRecord"
                :key="index + 'record'"
                class="col-hang"
              >
                <el-col :span="6">{{ item.currentFacilityName }}</el-col>
                <el-col :span="12">{{ item.migrationDate }}</el-col>
                <el-col :span="6">{{ item.targetFacilityName }}</el-col>
              </el-row>
              <span slot="footer" class="dialog-footer">
                <el-button class="model-cancel-btn" @click="dialogVisible = false">取 消</el-button>
                <el-button
                  type="primary"
                  class="model-submit-btn"
                  @click="dialogVisible = false"
                >确 定</el-button>
              </span>
            </el-dialog>
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        :page-size="pageSize"
        :current-page="currentPage"
        :total-size="length"
        @changePageSize="changePageSize"
        @changeCurrentPage="changeCurrentPage"
      />
    </template>
  </BaseMainSlot>
</template>

<script>
import Pagination from "@/components/Pagination";
// import ActionBar from "@/components/ActionBar/index";
import BaseMainSlot from "@/components/BaseMainSlot/baseone.vue";
import req from "@/api/digital-production/Individual-bio-management/replacement/index";
import { mymixin } from "@/utils/mixin";
// import FormVerify from "@/utils/verify.js"
export default {
  name: "ReplaceMent",
  components: {
    /* ButtonSearch, */
    Pagination,
    // ActionBar,
    BaseMainSlot
  },
  mixins: [mymixin],
  data() {
    return {
      condition: {
        breed: "HuSheep",
        name: "",
        eagTag: "",
        cultivationStartDate: "",
        cultivationEndDate: ""
      },
      bionIdList: [],
      length: 0,
      queryName: "",
      queryId: "",
      dialogVisible: false,
      totalNumber: 0,
      addDialog: false,
      test: "",
      startTime: "",
      endTime: "",
      addIndividualMigrationInformation: {
        numbers: ""
      },
      showRecord: [],
      tableData: [],
      rules: {
        numbers: [
          {
            pattern: /^-?\d{1,16}(?:\.\d{1,8})?$/,
            message: "输入有误",
            trigger: "change"
          }
        ]
      }
    };
  },
  watch: {
    nowChanceStau(newval) {
      // alert("4")
      // 当状态为add的时候触发添加方法
      if (newval === "add") {
        this.adduser();
      }
    },
    addDialog(newval, oldval) {
      this.nowChanceStau = "";
      this.addActive = oldval;
    },
    tableData() {
      this.nowChanceStau = "";
    }
  },
  created() {
    this.pagingQuery();
    this.queryBionAll();
  },
  methods: {
    updateInfo(val) {
      console.log(val);
    },
    // 查看迁移记录
    checkReplacement(val) {},
    queryBionAll() {
      req
        .queryBionAll({
          breed: "HuSheep"
        })
        .then((res) => {
          if (res.code === 1) {
            this.bionIdList = res.data || [];
          }
        });
    },
    checkDetail(val) {
      this.showRecord = [];
      if (val) {
        req.queryLogByBionId(val).then((res) => {
          if (res.code === 1) {
            // console.log(res);
            let result = res.data;
            this.showRecord = result;
            this.dialogVisible = true;
          }
        });
      }
    },
    queryInfo() {
      req
        .postPageBio({
          page: this.currentPage,
          size: this.pageSize,
          entity: this.condition
        })
        .then((res) => {
          if (res.code === 1) {
            // console.log(res);
            res = res.data || {};
            this.length = res.totalElements;
            res = res.content || [];
            this.tableData = res;
          }
        });
    },

    pagingQuery() {
      req
        .postPageBio({
          page: this.currentPage,
          size: this.pageSize,
          // size: 30,
          entity: {
            breed: "HuSheep"
          }
        })
        .then((res) => {
          let result = res || {};
          result = result.data || {};
          this.length = result.totalElements;
          result = result.content || [];
          this.tableData = result;
        });
    },
    adduser() {
      this.addDialog = true;
    },
    // 通过是否勾选数据来决定删除按钮是否具有删除功能
    handleSelect() {
      let list = this.$refs.tableDataRef.selection;
      this.selectlist = list;
      if (list.length > 0) {
        this.delActive = true;
      } else {
        this.delActive = false;
      }
      return list;
    },
    // 分页功能实现
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.pagingQuery();
    },
    changeCurrentPage(currentPage) {
      this.currentPage = currentPage;
      this.pagingQuery();
    }
  }
};
</script>

<style scoped lang="scss">
@import "~@/styles/variables.scss";
::v-deep .el-table {
  overflow: auto;
}
::v-deep .el-dialog__body {
  background: #f0f3f7;
  .el-input {
    width: 100%;
  }
  .el-select {
    //充满父元素（el-col）
    width: 100%;
  }
}
::v-deep  .el-dialog__wrapper{
  background-color: #7c8f8f33;
}
::v-deep .el-form-item__error {
  left: 100px;
}
.color {
  cursor: pointer;
  color: #33bad4;
  border-bottom: 1px solid #33bad4;
}

// 弹框底下按钮样式
.model-submit-btn{
background-color: #006e91;
    border-color: #006e91;
    &:hover{
      background-color: #006f91b9;
    border-color: #006f91b9;
    }
}
.model-cancel-btn{
  &:hover{
      background-color: #006f9128;
    border-color: #006e91;
    color:#006e91
    }
}
.col-hang{
  padding: 8px 0;
}
</style>
